<script setup>
import {Search} from "@element-plus/icons-vue";
import RanksDialog from "@/components/Talent/RanksDialog.vue";
import {nextTick, ref} from "vue";
import {Nation} from "@/apis/zyj/56nation.js";
import {pcaTextArr} from "element-china-area-data";
import {findTalentById, updateTalent} from "@/apis/zyj/talent"
import {ElMessage} from "element-plus";

const props = defineProps({
  updataDialog: Boolean,
  form: Object
})
const ruleFormRef = ref();//表单验证
const ranksDialog = ref(false)// 选择职级弹窗
const isSwitch = ref(false)

// 选择职级弹窗关闭
const CloseDialog = () => {
  ranksDialog.value = false
}
// 选择职级
const pickRank = (e) => {
  props.form.ranks = e
  props.form.rankNo = e.rankNo
  console.log(props.form)
  ranksDialog.value = false
}

function createID() {
  let code = 'STAFFE';
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  code = code + year + month + strDate + (props.total + 1)
  console.log(code)
  return code;
}

// 自动生成员工编码
const switchCode = (value) => {
  let code = createID();
  if (value) {
    props.form.employeeCode = code
  } else {
    props.form.employeeCode = ''
  }
}

const emit = defineEmits(['close-dialog'])

// 确定按钮
const handleConfirm = (value) => {
  props.form.accountAddress = JSON.stringify(props.form.accountAddress)
  props.form.currentAddress = JSON.stringify(props.form.currentAddress)
  console.log(12, props.form)
  value.validate(valid => {
    if (valid) {
      updateTalent(props.form).then(req => {
        console.log(req)
        if (req == '成功') {
          ElMessage.success('修改成功')
        } else {
          ElMessage.error('修改失败')
        }
        handleClose()
      })
    } else ElMessage.error('请填写完整信息');
  });
}
//校验
const rules = {
  employeeName: [
    {required: true, message: '请输入员工姓名', trigger: 'blur'},
    {min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入联系电话', trigger: 'blur'},
    {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
  ],
  rankNo: [
    {required: true, message: '请选择职级', trigger: 'blur'}
  ],
}
// 打开弹窗时清空校验
const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    ruleFormRef.value.clearValidate()
  })
}
// 关闭弹窗
const handleClose = () => {
  emit('close-dialog')
}
</script>

<template>
  <div class="dialog-class">
    <el-dialog title="修改员工花名册" v-model="props.updataDialog" @close="handleClose" @open="handleOpenCardDialog"
               width="60%" align-center>
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="9">
            <el-form-item label="员工编码" prop="employeeCode">
              <el-input v-model="form.employeeCode" disabled placeholder="请输入员工编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="员工姓名" prop="employeeName">
              <el-input v-model="form.employeeName" placeholder="请输入员工姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="学历">
              <el-select v-model="form.education" placeholder="选择学历">
                <el-option label="初中" value="初中"/>
                <el-option label="高中" value="高中"/>
                <el-option label="专科" value="专科"/>
                <el-option label="本科" value="本科"/>
                <el-option label="研究生" value="研究生"/>
                <el-option label="硕士" value="硕士"/>
                <el-option label="博士" value="博士"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="职级编码" prop="rankNo">
              <el-input
                  v-model="form.ranks.rankNo"
                  placeholder="请选择职级"
                  readonly
              >
                <template #append>
                  <el-button @click="selectedRank">
                    <el-icon>
                      <Search/>
                    </el-icon>
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职级名称">
              <el-input v-model="form.ranks.rankArrangementName" readonly placeholder="请输入职级名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职级层次">
              <el-input v-model="form.ranks.rankArrangement" readonly placeholder="请输入职级层次"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <el-form-item label="薪资范围">
              <el-input v-model="form.ranks.salaryMinimum" readonly placeholder="薪资上限" style="width: 45%"/>
              <span style="margin: 0 5px;">~</span>
              <el-input v-model="form.ranks.salaryCap" readonly placeholder="薪资下限" style="width: 45%"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际薪资">
              <el-input v-model="form.actualSalary" placeholder="请输入实际薪资"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="员工性别">
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" value="男"/>
                <el-option label="女" value="女"/>
                <el-option label="未知" value="未知"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族">
              <el-select v-model="form.ethnicity" placeholder="请选择民族">
                <el-option v-for="item in Nation" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="出生年月">
              <el-date-picker v-model="form.birthDate" type="date" placeholder="请选择日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻状况">
              <el-select v-model="form.maritalStatus" placeholder="请选择婚姻状况">
                <el-option label="已婚" value="已婚"/>
                <el-option label="未婚" value="未婚"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="政治面貌">
              <el-select v-model="form.politicalStatus" placeholder="请选择政治面貌">
                <el-option label="群众" value="群众"/>
                <el-option label="团员" value="团员"/>
                <el-option label="党员" value="党员"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证号">
              <el-input v-model="form.idNumber" placeholder="请输入身份证号"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input v-model="form.email" placeholder="请输入邮箱"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="籍贯">
              <el-input v-model="form.nativePlace" placeholder="请输入籍贯"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="户口地址">
              <el-cascader
                  size="large"
                  :options="pcaTextArr"
                  v-model="form.accountAddress"
                  clearable
                  style="width: 80%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-input v-model="form.accountDetailedAddress" placeholder="请输入详细地址"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="现住地址">
              <el-cascader
                  size="large"
                  v-model="form.currentAddress"
                  :options="pcaTextArr"
                  clearable
                  style="width: 80%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-input v-model="form.currentDetailedAddress" placeholder="请输入详细地址"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="紧急联系人">
              <el-input v-model="form.emergencyContact" placeholder="请输入紧急联系人"/>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="紧急联系电话">
              <el-input v-model="form.emergencyContactPhone" placeholder="请输入紧急联系电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="关系">
              <el-input v-model="form.relationship" placeholder="请输入关系"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
           <el-button @click="handleClose">取消</el-button>
           <el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
         </span>
      </template>
    </el-dialog>
  </div>
  <RanksDialog :rankDialog="ranksDialog" @close-dialog="CloseDialog" @pick-rank="pickRank"/>
</template>

<style scoped>
::v-deep(.el-form-item__label) {
  color: #606266;
  font-size: 14px;
  font-weight: 700;
}

:deep(.el-dialog__body) {
  padding: 20px 20px 20px 0;
}

</style>